<template>
    <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
        <el-form label-width="120px">
            <el-form-item label="通知主题：">{{ dataForm.title }} </el-form-item>
            <el-form-item label="通知内容：">
                <el-input type="textarea" :disabled="true" :autosize="{ minRows:1, maxRows: 6}"
                    v-model="dataForm.sketch"></el-input>
            </el-form-item>
            <el-form-item label="通告天数：">{{this.getDay(dataForm.day)}}</el-form-item>
            <el-form-item label="是否置顶：">{{getStatus(dataForm.isTop)}} </el-form-item>

            <el-form-item label="附件：">
                <a @click="handlePreview">{{dataForm.fileName}}</a>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    id: 0,
                    title: undefined,
                    sketch: undefined,
                    day: undefined,
                    isTop: '0',
                    fileUrl: undefined,
                    fileName: undefined
                }
            }
        },
        methods: {
            get(id) {
                // 获取通知详情
                this.dataForm.id = id || 0
                this.dataForm.title = undefined
                this.dataForm.sketch = undefined
                this.dataForm.day = undefined
                this.dataForm.isTop = '0'
                this.dataForm.fileUrl = undefined
                this.dataForm.fileName = undefined
                if (this.dataForm.id) {
                    this.$http({
                        url: this.$http.adornUrl(`/examineapprove/notice/info/${this.dataForm.id}`),
                        method: 'get',
                        params: this.$http.adornParams()
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.visible = true
                            this.dataForm = { ...data.notice }
                        }
                    })
                }
            },
            handlePreview() {
                // 点击下载
                this.getBlob(this.dataForm.fileUrl).then(res => {
                    this.saveAs(res, this.dataForm.fileName)
                })
            },
            getBlob(url) { // url:是文件在oss上的地址
                return new Promise(resolve => {
                    const xhr = new XMLHttpRequest()
                    xhr.open('GET', url, true)
                    xhr.responseType = 'blob'// 请求类型是blob类型
                    xhr.crossOrigin = '*' // 解决跨域问题
                    xhr.onload = () => {
                        if (xhr.status === 200) {
                            resolve(xhr.response)
                        }
                    }
                    xhr.send()
                })
            },
            saveAs(blob, filename) {
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, filename)
                } else {
                    const link = document.createElement('a')
                    const body = document.querySelector('body')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = filename
                    link.style.display = 'none'
                    body.appendChild(link)
                    link.click()
                    body.removeChild(link)
                    window.URL.revokeObjectURL(link.href)
                }
            },
            getStatus(style) {
                if (style === 1) {
                    return '是'
                } else if (style === 0) {
                    return '否'
                }
            },
            getDay(day) {
                if (!day) {
                    return '永久'
                }
                return day
            }
        }
    }
</script>

<style>
    .detail {
        width: 300px;
        margin: 10px 10px 15px 20px;
    }

    .el-form-item {
        font-size: 16px;
        margin-bottom: 0px;
    }

    a {
        cursor: pointer;
    }
</style>